.dwz-panel {
	position: relative;
	background: #fff;

	.panel-header {
		position: relative;
		.flex-all-center;
		.b-line;
		min-height: 44px;
		font-size: 14px;
		color: @headerButtonTxt;

		.panel-title {
			.flex-item;
			font-weight: bold;
			font-size: @l3;
		}

		.panel-title-right {
			.flex-all-center;
			height: 100%;
			color: @tabTxtColor;
		}
	}

	.panel-content {
		position: relative;
		min-height: 80px;
	}
}

.filter-title {
	color: @titleColor;
	padding: 5px 10px;
	font-size: @l3;
	clear: both;
}

.filter-content {
	padding: 0 10px;
	.clearfix;

	li {
		border-radius: 6px;
		background: @inputBg;
		color: @txtColor;
		margin-right: 3%;
		margin-bottom: 10px;
		width: 22.75%;
		height: 36px;
		line-height: 36px;
		overflow: hidden;
		float: left;
		text-align: center;
		font-size: @l4;

		&:nth-child(4n) {
			margin-right: 0;
		}

		&.active {
			color: @btnTxtColorPrimary;
			background: @btnBgPrimary;
			font-weight: bold;
		}

		&.long-item {
			width: 48.5%;

			&:nth-child(2n) {
				margin-right: 0;
			}
		}
	}
}

#mask-filter-panel {
	.filter-blur;
	z-index: 900;
}

#filter-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 20%;
	display: none;
	background: @defaultBg;
	z-index: 901;
}

#mask-filter-select {
	z-index: 910;
}

#filter-select {
	position: absolute;
	top: 0;
	right: 0;
	height: 0;
	left: 0;
	display: none;
	overflow: hidden;
	background: @paneBg;
	z-index: 911;
	transition: bottom 0.5s ease;

	&.open {
		display: flex;
		flex-direction: column;
	}

	&:before {
		.t-line;
		content: ' ';
		height: 1px;
	}

	.content {
		background: transparent;
		top: 1px;
	}

	.column-box {
		.flex-wrap;
		.full-size;

		.column-item {
			position: relative;

			.list {
				margin: 1px;

				.item {
					&:before {
						border: none;
					}
				}
			}

			.flex-item;

			.r-line;

			&:last-child {
				border: none;
			}

			&.gray {
				background-color: @inputBg;

				.list {
					.item {
						background: transparent;
					}
				}
			}
		}
	}
}
